<template>
  <div
    v-show="isShowMask"
    class="mask"
    @click="closeMask">
    <div
      :style="{width:widths}"
      class="mask-box clearfix">
      <!--   <img src="../../assets/images/right.svg" class="right" v-if="isShow"> -->
      <img
        v-if="isShowLoading"
        src="../../assets/images/loading.gif"
        height="100"
        width="100"
        alt=""
        class="loading">
      <p v-if="isShow">{{ msg }}</p>
      <img
        v-if="isShow"
        src="../../assets/images/close.svg"
        alt=""
        class="close"
        @click="closeMask">
    </div>
  </div>
</template>
<script>
export default {
  props: {
    msg: {
      type: String,
      default: ''
    },
    isShowMask: {
      type: Boolean,
      default: false
    },
    num: {
      type: Number,
      default: 1
    },
    widths: {
      type: String,
      default: ''
    }
  },
  data () {
    return {
      isShowLoading: true,
      isShow: false

    }
  },
  mounted () {
    this.accordNeed()
  },
  methods: {
    closeMask () {
      this.$emit('closeMask')
    },
    accordNeed () {
      // 1为显示loading 2为显示提示成攻
      if (this.num === 1) {
        this.isShow = false
        this.isShowLoading = true
      } else {
        this.isShow = true
        this.isShowLoading = false
      }
    }

  }
}

</script>
<style lang="scss">
.mask {
  position: fixed;
  left: 0;
  bottom: 0;
  top: 0;
  right: 0;
  z-index: 10000;
  background: rgba(0, 0, 0, 0.3);
  display: flex;
  display: -webkit-flex;
  -webkit-justify-content: center;
  -webkit-align-items: center;
  transition: all linear .5s;
  -webkit-transition: all linear .5s;
  -ms-transition: all linear .5s;
  -o-transition: all linear .5s;
  .mask-box {

    padding: .20rem;
    margin: 0 auto;
    background: rgba(0, 0, 0, 0.8);
    border-radius: .10rem;
    display: flex;
    display: -webkit-flex;
    position: relative;
    p {
      color: #37dfbb;
      line-height: 160%;
      font-size: .32rem;
      margin-top: .30rem;
      margin-bottom: .20rem;
    }
    img.loading {
      width: .6rem;
      height: .6rem;
      margin-left: .20rem;
      margin-right: .20rem;
    }
    img.right {
      width: 1rem;
      height: 1rem;
    }
    img.close {
      width: .40rem;
      height: .40rem;
      position: absolute;
      right: 0.20rem;
      top: .10rem;
    }
  }
}

</style>
